<template>
    <div class="banner">
        <swiper :options="swiperOption">
            <swiper-slide class="slide" v-for="(slide, index) in swiperSlides" :key="index">
                <img class="img" :src="slide" alt="">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
    name: 'banner',
    data: function() {
        return {
            swiperOption: {
                autoplay: {
                    disableOnInteraction: false
                },
                loop: 1,
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true,
                },
                effect: 'cube',
                cubeEffect: {
                    shadowOffset: 10,
                    shadowScale: .5
                },
                speed: 300
            },
            swiperSlides: [
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
            ]
        }
    },
    components: {
        swiperSlide,
        swiper,
    }
     
}
</script>

<style lang="scss" scoped>
.banner {
    overflow: hidden;
    width: 100%;
    height: 320px;
    .swiper-container {
        height: 300px;
        .slide {
            text-align: center;
            line-height: 100px;
        }
        .img{
            width: 100%;
            height: 100%;
        }
    }
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
        bottom: 0;
    }
}

</style>

